<template>
  <div class="main">
    <el-container>
      <el-main style="line-height:35px">
        <!-- 查询部分 -->
        <h2 style="line-height: 20px;width:100%;text-align:left;margin-bottom:20px">服装库存管理</h2>
        <el-card class="box-card">
          <div>
            <div class="clearfix" style="float:left;line-height:20px">
              <strong>库存查询</strong>
            </div>
            <div class="clear"></div>
            <el-divider></el-divider>
          </div>
          <div>
            <div class="clear"></div>
            <div style="float:left;line-height:40px;margin-bottom:20px">
              <el-form :inline="true" :model="formInline" class="demo-form-inline" :rules="rules">
                <el-form-item prop="message">
                  <!-- <el-input v-model="formInline.message" placeholder="服装编号或类别"></el-input> -->
                  <el-input
                    placeholder="服装编号或名称"
                    v-model="formInline.message"
                    class="input-with-select"
                  >
                    <el-select v-model="formInline.select" slot="prepend" style="width:110px">
                      <el-option label="服装编号" value="1" style="margin:0px"></el-option>
                      <el-option label="名称" value="2" style="margin:0px"></el-option>
                    </el-select>
                  </el-input>
                </el-form-item>
                <el-form-item label="尺码">
                  <el-select v-model="formInline.size" placeholder="尺码">
                    <el-option
                      style="margin:0px"
                      :label="item.name"
                      :value="item.value"
                      v-for="item in  sizeMenu"
                      :key="item.index"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="颜色">
                  <el-select v-model="formInline.color" placeholder="颜色">
                    <el-option
                      style="margin:0px"
                      :label="item.name"
                      :value="item.value"
                      v-for="item in  colorMenu"
                      :key="item.index"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button style="margin-left:20px" type="primary" plain @click="getMessage">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top:20px">
          <div>
            <div style="line-height:20px">
              <strong style="float:left">库存信息</strong>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="addDialogFormVisible = true"
              >新增规格</el-button>

              <!-- 新增规格弹出框 -->
              <el-dialog title="新增规格" :visible.sync="addDialogFormVisible">
                <el-form :model="addForm">
                  <el-form-item label="服装类别" style="margin-left:55px">
                    <el-select v-model="addForm.idcategory" placeholder="服装类别">
                      <el-option
                        :label="item.category_name"
                        :value="item.id"
                        v-for="item in idcategorys"
                        :key="item.index"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="服装名称" :label-width="formLabelWidth">
                    <el-input v-model="addForm.name"></el-input>
                  </el-form-item>
                  <el-form-item label="尺   码" :label-width="formLabelWidth">
                    <el-select v-model="addForm.idsize" placeholder="尺码">
                      <el-option
                        :label="item.size"
                        :value="item.idsize"
                        v-for="item in  sizeMenu"
                        :key="item.index"
                        style="margin:0px"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="颜   色" :label-width="formLabelWidth">
                    <el-select v-model="addForm.idcolor" placeholder="颜色">
                      <el-option
                        :label="item.color"
                        :value="item.idcolor"
                        v-for="item in  colorMenu"
                        :key="item.index"
                        style="margin:0px"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="条形码" :label-width="formLabelWidth">
                    <el-input v-model="addForm.code"></el-input>
                  </el-form-item>
                  <el-form-item label="售价" :label-width="formLabelWidth">
                    <el-input v-model="addForm.price"></el-input>
                  </el-form-item>
                  <el-form-item label="库存" :label-width="formLabelWidth">
                    <el-input-number v-model="addForm.remains" @change="handleChange" label="描述文字"></el-input-number>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="addDialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="add">确 定</el-button>
                </div>
              </el-dialog>
            </div>
            <!-- 显示内容表单 -->
            <div class="clear"></div>
            <el-divider></el-divider>
          </div>
          <el-table :data="tableData" border style="width: 100%;height:100%" empty-text="暂无数据">
            <el-table-column fixed prop="id" label="服装ID" height="30"></el-table-column>
            <el-table-column fixed prop="clothes.flag" label="服装编号" height="30"></el-table-column>
            <el-table-column fixed prop="clothes.name" label="服装名称" height="30"></el-table-column>
            <el-table-column fixed prop="category.category_name" label="服装类别" height="30"></el-table-column>
            <el-table-column fixed prop="size.size" label="尺码" height="30"></el-table-column>
            <el-table-column fixed prop="color.color" label="颜色" height="30"></el-table-column>
            <el-table-column fixed prop="code" label="条形码" height="30"></el-table-column>
            <el-table-column fixed prop="price" label="售价" height="30"></el-table-column>
            <el-table-column fixed prop="remains" label="库存数" height="30"></el-table-column>
            <el-table-column fixed="right" label="操作" width="200" height="30">
              <template slot-scope="scope">
                <el-button type="text" @click="open(scope.row)" size="small">删除</el-button>
                <el-button type="text" @click="editor(scope.row)" size="small">编辑</el-button>
                <!-- @click="editor(scope.$index, scope.row)" -->
                <!-- 编辑弹出框 -->
                <el-dialog
                  title="修改"
                  :visible.sync="editorDialogFormVisible"
                  :append-to-body="true"
                >
                  <el-form :model="editorForm">
                    <el-form-item label="服装类别" style="margin-left:55px">
                      <el-select v-model="editorForm.idcategory" placeholder="服装类别">
                        <el-option
                          :label="item.category_name"
                          :value="item.id"
                          v-for="item in idcategorys"
                          :key="item.index"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="服装名称" :label-width="formLabelWidth">
                      <el-input v-model="editorForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="尺   码" :label-width="formLabelWidth">
                      <el-select v-model="editorForm.idsize" placeholder="服装类别">
                        <el-option
                          :label="item.size"
                          :value="item.idsize"
                          v-for="item in sizeMenu"
                          :key="item.index"
                          style="margin:0px"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="颜   色" :label-width="formLabelWidth">
                      <el-select v-model="editorForm.idcolor" placeholder="颜色">
                        <el-option
                          :label="item.color"
                          :value="item.idcolor"
                          v-for="item in  colorMenu"
                          :key="item.index"
                          style="margin:0px"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="条形码" :label-width="formLabelWidth">
                      <el-input v-model="editorForm.code"></el-input>
                    </el-form-item>
                    <el-form-item label="售价" :label-width="formLabelWidth">
                      <el-input v-model="editorForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="库存" :label-width="formLabelWidth">
                      <el-input-number
                        v-model="editorForm.remains"
                        @change="handleChange1"
                        label="描述文字"
                      ></el-input-number>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="addDialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="change">确 定</el-button>
                  </div>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="block" style="margin-top:30px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
/* eslint-disable no-unused-vars */
export default {
  name: "stockManage",
  data() {
    return {
      tableData: [],
      // message: "",
      addDialogFormVisible: false,
      editorDialogFormVisible: false,
      idcategorys: [],
      addForm: {
        idcategory: "",
        name: "",
        idcolor: "",
        idsize: "",
        price: "",
        remains: "",
        code: ""
      },
      editorForm: {
        idcategory: "",
        name: "",
        idcolor: "",
        idsize: "",
        price: "",
        remains: "",
        code: "",
        ID: ""
      },
      formLabelWidth: "120px",
      sizeMenu: [
        // {
        //   name: "均码",
        //   value: "1"
        // },
        // {
        //   name: "S码",
        //   value: "2"
        // },
        // {
        //   name: "M码",
        //   value: "3"
        // },
        // {
        //   name: "L码",
        //   value: "4"
        // },
        // {
        //   name: "XL码",
        //   value: "5"
        // }
      ],
      colorMenu: [
        // {
        //   name: "白色",
        //   value: "1"
        // },
        // {
        //   name: "黑色",
        //   value: "2"
        // },
        // {
        //   name: "灰色",
        //   value: "3"
        // },
        // {
        //   name: "蓝色",
        //   value: "4"
        // },
        // {
        //   name: "黄色",
        //   value: "5"
        // },
        // {
        //   name: "红色",
        //   value: "6"
        // },
        // {
        //   name: "粉色",
        //   value: "7"
        // },
        // {
        //   name: "绿色",
        //   value: "8"
        // },
        // {
        //   name: "紫色",
        //   value: "9"
        // },
        // {
        //   name: "其他",
        //   value: "10"
        // }
      ],
      formInline: {
        size: "",
        color: "",
        name: "",
        flag: "",
        message: "",
        select: "请选择"
      },
      currentPage: 1,
      total: 0,
      pageSize: 5,
      //表单验证，需要再el-form-item 元素中增加prop属性
      rules: {
        message: [
          { required: true, message: "服装编号或名称不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.rendering();
  },
  mounted() {
    this.rendering();
    this.getCategory();
    console.log(this.idcategorys);
  },

  watch: {
    "formInline.select": function(newselect, oldselect) {
      // console.log(newselect);
      if (newselect == 1) {
        this.formInline.flag = this.formInline.message;
        this.formInline.name = "";
        // console.log(this.formInline.flag);
      } else {
        this.formInline.name = this.formInline.message;
        this.formInline.flag = "";
      }
    },
    "formInline.message": function(newmessage, oldmessage) {
      // console.log(newmessage);
      if (this.formInline.select == 1) {
        this.formInline.flag = this.formInline.message;
        this.formInline.name = "";
        // console.log(this.formInline.flag);
      } else {
        this.formInline.name = this.formInline.message;
        this.formInline.flag = "";
        // console.log(2);
      }
    }
  },
  methods: {
    rendering() {
      this.$axios({
        url: "/Norms/getNorms",
        methods: "get",
        headers: { "content-type": "application/json" },
        params: { pageNum: this.currentPage, pageSize: this.pageSize }
      }).then(res => {
        // console.log(res.data);
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.pageSize = res.data.pageSize;
        this.currentPage = res.data.pageNum;
      });
      //颜色
      this.$axios({
        url: "/Color/getColor",
        methods: "get"
        // headers: { "content-type": "application/json" },
        // params: { pageNum: this.currentPage, pageSize: this.pageSize }
      }).then(res => {
        // console.log(res.data);
        // this.tableData = res.data.list;
        // this.total = res.data.total;
        // this.pageSize = res.data.pageSize;
        this.colorMenu = res.data;
        console.log("颜色1111");
        console.log(this.colorMenu);
        // console.log("颜色");
        // console.log(res);
      });
      //尺码
      this.$axios({
        url: "/Size/getSize",
        methods: "get"
        // headers: { "content-type": "application/json" },
        // params: { pageNum: this.currentPage, pageSize: this.pageSize }
      }).then(res => {
        // this.tableData = res.data.list;
        // this.total = res.data.total;
        // this.pageSize = res.data.pageSize;
        this.sizeMenu = res.data;
        console.log("chima2222");
        console.log(this.sizeMenu);
      });
    },
    getMessage() {
      // console.log(this.message);
      this.$axios({
        url: "/Norms/searchNorms",
        methods: "post",
        // headers: { "content-type": "application/json" },
        params: {
          flag: this.formInline.flag,
          name: this.formInline.name,
          idcolor: this.formInline.color,
          idsize: this.formInline.size,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        // console.log(res.data);
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.pageSize = res.data.pageSize;
        this.currentPage = res.data.pageNum;
        this.formInline.flag = "";
        this.formInline.name = "";
      });
    },
    open(row) {
      // console.log(row);
      // let ID = this.idcategorys.find(
      //   item => item.category_name == row.category.category_name
      // );
      // console.log(ID.id);
      this.$confirm("您确定要删除嘛？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // console.log(row.id);
        this.$axios({
          url: "Norms/deleteNorms",
          methods: "get",
          headers: { "content-type": "application/json" },
          params: {
            id: row.id
          }
        }).then(res => {
          // console.log(res.data);
          this.$message({
            type: "info",
            message: res.data.msg
          });
          this.rendering();
        });
      });
      // .then(() => {
      //   this.$message({
      //     type: "success",
      //     message: "删除成功!"
      //   });
      // })
      // .catch(() => {
      //   this.$message({
      //     type: "info",
      //     message: "已取消删除"
      //   });
      // });
    },
    add() {
      this.addDialogFormVisible = false;
      this.$axios({
        url: "/Norms/insertNorms",
        methods: "get",
        headers: { "content-type": "application/json" },
        params: {
          idcategory: this.addForm.idcategory,
          name: this.addForm.name,
          idcolor: this.addForm.idcolor,
          idsize: this.addForm.idsize,
          price: this.addForm.price,
          remains: this.addForm.remains,
          code: this.addForm.code
        }
      }).then(res => {
        // console.log(res.data);
        this.$message({
          type: "info",
          message: res.data.msg
        });
        this.rendering();
      });
      this.addForm.name = "";
      this.addForm.note = "";
    },
    editor(row) {
      this.editorDialogFormVisible = true;
      this.editorForm.idcategory = this.idcategorys.find(
        item => item.category_name == row.category.category_name
      ).id;
      this.editorForm.name = row.clothes.name;
      this.editorForm.idcolor = this.colorMenu.find(
        item => item.name == row.color.color
      ).value;
      this.editorForm.idsize = this.sizeMenu.find(
        item => item.name == row.size.size
      ).value;
      this.editorForm.price = row.price;
      this.editorForm.remains = row.remains;
      this.editorForm.code = row.code;
      this.editorForm.ID = row.id;
    },
    change() {
      this.editorDialogFormVisible = false;
      this.$axios({
        url: "Norms/updateNorms",
        methods: "post",
        headers: { "content-type": "application/json" },
        params: {
          idsize: this.editorForm.idsize,
          idcolor: this.editorForm.idcolor,
          code: this.editorForm.code,
          price: this.editorForm.price,
          remains: this.editorForm.remains,
          id: this.editorForm.ID,
          idclothes: this.editorForm.idcategory
        }
      })
        .then(res => {
          // console.log(res.data);
          this.$message({
            type: "info",
            message: res.data.msg
          });
          // this.editorForm.idsize = "";
          // this.editorForm.idcolor = "";
          // this.this.editorForm.code = "";
          // this.editorForm.price = "";
          // this.editorForm.remains = "";
          // this.editorForm.category_name = "";
          // this.editorForm.name = "";
          this.rendering();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改"
          });
        });
    },
    getCategory() {
      this.$axios({
        url: "/showCategory",
        methods: "get"
      }).then(res => {
        // console.log(res.data);
        this.idcategorys = res.data;
        console.log(this.idcategorys);
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.rendering();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.rendering();
    },
    handleChange(value) {
      this.addForm.remains = value;
    },
    handleChange1(value) {
      this.editorForm.remains = value;
    }
  }
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 600px;
  height: 600px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 1150px;
}

.clear {
  clear: both;
}
</style>